<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../reset.css">
    <link rel="stylesheet" href="../../fa/css/all.css">
    <style>
        .top-bar-wrapper {
            background-color: #333;
            height: 40px;
            line-height: 40px;
            min-width: 1126px;

        }

        .top-bar {
            width: 1226px;
            height: 40px;
        }

        .top-bar a {
            text-decoration: none;
            font-size: 12px;
            color: #b0b0b0;
            margin: 0 16px;
            display: inline-block;
        }

        .top-bar a:hover {
            color: #F4F4F4;
        }

        .top-bar .line {
            color: #424242;
            font-size: 13px;
        }

        .top-bar .service {
            float: left;
        }

        .top-bar .user-info {
            float: right;
        }

        .top-bar .shop-cart {
            float: right;
        }

        .top-bar li {
            float: left;
        }

        .top-bar .shop-cart .fa-shopping-cart {
            font-size: 12px;
            color: #b0b0b0;
        }

        .top-bar .shop-cart a {
            margin-left: 2px;
        }
    </style>
</head>
<body>
<div class="top-bar-wrapper">
    <div class="top-bar">
        <div class="service">
            <ul>
                <li>
                    <a href="javascript:;">小米商城</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="javascript:;">MIUI</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="javascript:;">IoT</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="javascript:;">云服务</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="javascript:;">优品</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="javascript:;">小爱开放平台</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="javascript:;">企业团购</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="javascript:;">资质证照</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="javascript:;">协议规则</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="javascript:;">下载app</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="javascript:;">Select Location</a>
                </li>
            </ul>
        </div>
        <div class="shop-cart">
            <i class="fas fa-shopping-cart"></i>
            <a href="javascript:;">购物车</a>
        </div>
        <div class="user-info">
            <ul>
                <li>
                    <a href="javascript:;">登录</a>
                </li>
                <li class="line"></li>
                <li>
                    <a href="javascript:;">注册</a>
                </li>
                <li class="line"></li>
                <li>
                    <a href="javascript:;">消息通知</a>
                </li>
            </ul>
        </div>

    </div>
</div>
</body>
</html>